import React from 'react';
import {WeaTools,WeaTop,WeaProgress} from 'ecCom';
import { Button,Modal,Rate,Tabs,Spin,Row,Col,Card,Form} from 'antd';

class ContractRP extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            datas:[]
        }
    }
    
    componentWillMount() {
        this.setState({ datas:[]});
    }

    componentDidMount() {
        // const {datas=[]} = this.props;
        // if(datas){
        //     this.isShowSynergy(isshow);
        // }

    }
    
    componentWillReceiveProps(nextProps) {
        if (this.props.datas !== nextProps.datas) {
            this.setState({ datas: nextProps.datas });
        }
    }


    render() {
        const datas = this.state.datas;
        let listItems =[];
        // console.log(datas);
        if(datas&&datas.length>0){
            
            datas.map((data) =>{
                if(data.type=='img'){
                    listItems.push(
                    <Col span="6" className="wea-contract-ledger-sumpage-col" >
                        <Card style={{background: `#${data.bgc}`}}>
                            <p>{data.labelName}</p>
                            <h2>{data.desc}</h2>
                            <div className="wea-contract-ledger-sumpage-col-imagediv" >
                                <img src="/contract/module/images/money.png" width={30} height={30} ></img>
                            </div>
                            <div className="wea-contract-ledger-sumpage-col-bottom" />
                        </Card>
                    </Col>);
                }else{
                    listItems.push(
                    <Col span="6" className="wea-contract-ledger-sumpage-col" >
                        <Card style={{background: `#${data.bgc}`}}>
                            <p>{data.labelName}</p>
                            <h2>{data.desc}</h2>
                            <WeaProgress className="wea-contract-ledger-sumpage-col-progress" type="circle" percent={data.percent}  format={percent => `${percent}%`} width={44} />
                            <div className="wea-contract-ledger-sumpage-col-bottom" />
                        </Card>
                    </Col>);
                }
            });

            return (<Row className="wea-contract-ledger-sumpage-row">{listItems}</Row>);
            // return(
            //     <Row className="wea-contract-ledger-sumpage-row">
            //         <Col span="6" className="wea-contract-ledger-sumpage-col" >
            //             <Card style={{background: '#4794DF'}}>
            //                 <p>收入合同总金额</p>
            //                 <h2>1111</h2>
            //                 <div className="wea-contract-ledger-sumpage-col-imagediv" >
            //                     <img src="/contract/module/images/money.png" width={30} height={30} ></img>
            //                 </div>
            //                 <div className="wea-contract-ledger-sumpage-col-bottom" />
            //             </Card>
            //         </Col>
            //         <Col span="6" className="wea-contract-ledger-sumpage-col" >
            //             <Card style={{background:'#7180B4'}}>
            //                 <p>累计已收</p>
            //                 <h2>2222</h2>
            //                 <Progress className="wea-contract-ledger-sumpage-col-progress" type="circle" percent={12}  format={percent => `${percent}%`} width={44} />
            //                 <div className="wea-contract-ledger-sumpage-col-bottom"/>
            //             </Card>
            //         </Col>
            //         <Col span="6" className="wea-contract-ledger-sumpage-col"  >
            //             <Card style={{background:'#4DA8A9'}}>
            //                 <p>支出合同总金额</p>
            //                 <h2>3333</h2>
            //                 <div className="wea-contract-ledger-sumpage-col-imagediv" >
            //                     <img src="/contract/module/images/money.png" width={30} height={30} ></img>
            //                 </div>
            //                 <div className="wea-contract-ledger-sumpage-col-bottom"/>
            //             </Card>
            //         </Col>
            //         <Col span="6" className="wea-contract-ledger-sumpage-col"  >
            //             <Card style={{background:'#EC6B63'}}>
            //                 <p>累计支出</p>
            //                 <h2>4444</h2>
            //                 <Progress className="wea-contract-ledger-sumpage-col-progress" type="circle" percent={55}  format={percent => `${percent}%`} width={44} />
            //                 <div className="wea-contract-ledger-sumpage-col-bottom"/>
            //             </Card>
            //         </Col>
            //     </Row>
            // );
        }else{
            return(
                <div></div>
            );
        }
    }
}

export default ContractRP;